<template>
	<view class="page">
		<p-navbar  title="安全">
		</p-navbar>
		<view class="fooler" v-for="(item,index) in list" :key="index">
			<u-cell-item center :is-link="true"  index="index" @tap="cell(item.path)" :hover-class="hoverClass"
			  :title="item.name" :title-style="labels" ></u-cell-item>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				labels: {'font-size': '26rpx','padding-left': '10rpx','font-weight': 'bold','color':'#333333'} ,
				list:[
					{
						name:'修改登录密码',
						icon:'/static/user/user1.png',
						path:'./forget?type=0',
					},
					{
						name:'修改安全密码',
						icon:'/static/user/user2.png',
						path:'./forget-item',
					},
				]
			}
		},
		computed: {
			hoverClass() {
				// 如果右侧是switch步进器组件的话，去掉cell的点击反馈，因为这个时候点击的反馈应该在switch上
				return this.rightSlot == 'switch' ? 'none' : 'none';
			}
		},
		methods: {
			nav(item){//会员跳转
			if(item=='0'){
				uni.navigateTo({
			   	url:'./member'
			   })
			}else{
				uni.navigateTo({
					url:'./quanxian'
				})
			}
			},
			cell(item){
				uni.navigateTo({
					url:item
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.hq{
	display: flex;
	justify-content: space-between;
	padding-left: 40rpx;
	background: #333333;
	// height: 110rpx;
	font-size: 38rpx;
	font-family: PingFang;
	font-weight: bold;
	line-height: 52px;
	color: #333;
}
	.user {
		display: flex;
		align-items: center;
		background: #333333;
		.image {
			width: 164rpx;
			height: 164rpx;
			border-radius: 50%;
			margin: 20rpx 40rpx;
		}

		.user-item {
			display: flex;
			padding-top: 20rpx;

			.user1 {
				font-size: 32rpx;
				font-family: PingFang;
				font-weight: 800;
				line-height: 50rpx;
				color: #333;
			}
		}

		.user-item1 {
			font-size: 24rpx;
			font-family: PingFang;
			font-weight: 500;
			line-height: 44rpx;
			color: #333;
		}
		
		// .user-item2 {
		// 	padding-top: 20rpx;
		// 	font-size: 22rpx;
		// 	font-family: PingFang;
		// 	font-weight: 500;
		// 	line-height: 32rpx;
		// 	color: #FEC563;
		// }
	}
	.img{
		width: 126rpx ;
		height: 50rpx ;
	}
	.main{
		display: flex;
		justify-content: space-between;
		padding: 20rpx 40rpx;
		margin: 20rpx 0rpx;
		.main-item{
			display: flex;
			width: 30%;
			justify-content: space-between;
			align-items: center;
			.image1{
				width: 60rpx;
				height: 60rpx;
			}
			.image2{
				width: 30rpx;
				height: 25rpx;
			}
			.item{
				font-size: 30rpx;
				font-family: PingFang;
				font-weight: bold;
				line-height: 42rpx;
				color: #333;
			}
		}
		.main-item1{
			// display: flex;
			// align-items: center;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #333;
			text{
				padding-left: 10rpx;
			}
			.item2{
				text-align: right;
				font-size: 20rpx;
				font-family: PingFang;
				font-weight: bold;
				color: #333;
			}
			text{
				font-size: 20rpx;
			}
			image{
				margin-left: 20rpx;
				width: 25rpx;
				height: 40rpx;
			}
		}
	}
	.fooler{
		/deep/ .u-cell {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 18px 15px;
    font-size: 13px;
    line-height: 23px;
    text-align: left;
    display: flex;
    align-items: center;
	&::after{
		border-bottom: 1px solid rgba(#333,0.1);;
	}
	/deep/ .u-cell_title{
		color: #333 !important;
	}
	/deep/ .u-border-bottom{
		
	}
}
	} 
</style>
